<!--
 * @Author: 17607638761 zoujiaying@yuandian.com
 * @Date: 2023-06-19 14:28:13
 * @LastEditors: 17607638761 zoujiaying@yuandian.com
 * @LastEditTime: 2023-07-04 14:39:28
 * @FilePath: \bpm-ui\src\views\management\middle-platform\service\indicatorConfig.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<el-tabs v-model="state.activeName">
			<el-tab-pane label="指标上报" name="myForm">
				<!-- <yd-form ref="myForm" :rules="rules" :options="formOptions" :model="state.form" @change="handlerSelectChange"> </yd-form> -->
				<el-form ref="myForm" :model="state.form" :rules="rules" label-width="120px">
					<el-form-item label="主量纲" prop="subDimensionList">
						<el-select v-model="state.form.majorDimension" placeholder="请选择主量纲">
							<el-option v-for="item in state.mainOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="副量纲">
						<el-select v-model="state.form.subDimensionList" multiple clearable placeholder="请选择副量纲">
							<el-option v-for="item in state.viceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<!-- <el-tab-pane label="计费上报" name="myFormTwo" lazy>
				<yd-form ref="myFormTwo" :rules="rulesTwo" :options="formOptionsTwo" :model="state.form" @change="handlerSelectChange">
				</yd-form>
				<el-form ref="myFormTwo" :model="state.form" :rules="rulesTwo" label-width="120px">
					<el-form-item label="是否需要计费">
						<el-radio-group v-model="state.form.isCharging">
							<el-radio label="1">是</el-radio>
							<el-radio label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="计费模型Id" prop="chargingModelId">
						<el-input v-model="state.form.chargingModelId" clearable placeholder="请输入计费模型Id"></el-input>
					</el-form-item>
					<el-form-item label="计费规则Id">
						<el-input v-model="state.form.chargingStatusId" clearable placeholder="请输入计费规则Id"></el-input>
					</el-form-item>
					<el-form-item label="计费单位编码" prop="chargingOrgCode">
						<el-input v-model="state.form.chargingOrgCode" clearable placeholder="请输入计费单位编码"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane> -->
		</el-tabs>
		<div style="text-align: center">
			<el-button @click="cacelClick">取消</el-button>
			<el-button type="primary" @click="confirmClick">确认</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { dimensionOption, subDimensionOption, updateDimensionById } from '@/api/middle-platform/conf-service';
import { stat } from 'fs';

const emit = defineEmits(['handleClosePeriodDialog']);

// eslint-disable-next-line vue/require-prop-types
const props = defineProps(['currentServiceId', 'tableRow', 'open']);

const state = reactive({
	activeName: 'myForm',
	btnLoading: false,
	mainOptions: [] as any,
	viceOptions: [] as any,
	form: {
		majorDimension: '',
		subDimensionList: [],
		id: '',
		isCharging: '0',
		chargingModelId: '',
		chargingStatusId: '',
		chargingOrgCode: '0101',
	},
});
// 表单校验
const rules = reactive<FormRules>({
	subDimensionList: [{ required: true, message: '主量纲不能为空', trigger: 'blur' }],
});
// 表单校验
const rulesTwo = reactive<FormRules>({
	chargingModelId: [{ required: true, message: '计费模型Id不能为空', trigger: 'blur' }],
	chargingOrgCode: [{ required: true, message: '计费单位编码不能为空', trigger: 'blur' }],
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '主量纲',
		prop: 'main',
		attrs: {
			clearable: true,
		},
		span: 24,
	},
	{
		type: 'select',
		label: '副量纲',
		prop: 'vice',
		attrs: {
			clearable: true,
			multiple: true,
		},
		span: 24,
	},
]);
const formOptionsTwo = reactive<FormOptionType>([
	{
		label: '是否需要计费',
		prop: 'isCharging',
		span: 24,
		type: 'radio-group',
		children: [
			{
				label: '是',
				value: 1,
			},
			{
				label: '否',
				value: 0,
			},
		],
	},
	{
		type: 'input',
		label: '计费模型Id',
		prop: 'chargingModelId',
		attrs: {
			clearable: true,
		},
		span: 24,
	},
	{
		type: 'input',
		label: '计费规则Id',
		prop: 'chargingStatusId',
		attrs: {
			clearable: true,
		},
		span: 24,
	},
	{
		type: 'input',
		label: '计费单位编码',
		prop: 'chargingOrgCode',
		attrs: {
			clearable: true,
		},
		span: 24,
	},
]);
/**
 * 下拉框change
 */
function handlerSelectChange(options: BaseOptionType, value: any) {
	console.log(options, value, '下拉框change');
}

const myForm = ref();
const myFormTwo = ref();
function confirmClick() {
	if (state.activeName === 'myForm') {
		myForm.value.validate((valid: boolean) => {
			if (valid) {
				updateDimensionById(state.form).then((res: any) => {
					if (res.code === 0) {
						ElMessage.success('更新成功');
						emit('handleClosePeriodDialog');
						assignNull();
					} else {
						ElMessage.error(res.msg);
					}
				});
			}
			state.activeName = 'myForm';
		});
		return;
	}
	if (state.activeName === 'myFormTwo') {
		myFormTwo.value.validate((valid: boolean) => {
			if (valid) {
				console.log('submit!');
				assignNull();
			} else {
				console.log('error submit!');
			}
		});
	}
}

watch(
	() => props.open,
	(newVal) => {
		dimensionOptionFn();
		subDimensionOptionFn();
		state.form.majorDimension = props.tableRow.majorDimension;
		state.form.subDimensionList = props.tableRow.subDimensionList;
		state.form.id = props.currentServiceId;
	},
	{ deep: true, immediate: true }
);

function cacelClick() {
	assignNull();
	emit('handleClosePeriodDialog');
}

function assignNull() {
	Object.keys(state.form).forEach((key: string) => {
		if (state.form[key] instanceof Array) {
			state.form[key] = [];
		} else {
			state.form[key] = '';
		}
	});
	console.log(state.form, 'state.form');
}

/**
 * 获取主量纲
 */
function dimensionOptionFn() {
	dimensionOption().then((res: any) => {
		state.mainOptions = res.data;
	});
}
/**
 * 获取副量纲
 */
function subDimensionOptionFn() {
	subDimensionOption().then((res: any) => {
		state.viceOptions = res.data;
	});
}
</script>

<style></style>
